import React, { useState } from "react";
import { Breadcrumb, Layout, theme } from "antd";
import { Outlet } from "react-router-dom";
import MainMenu from "@/components/MainMenu"

const { Header, Content, Footer, Sider } = Layout;

const View: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        // token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <Layout style={{ minHeight: "100vh" }}>
            {/* 左边侧边栏 */}
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical"
                    style={{
                        height: '32px',
                        margin: '16px',
                        background: 'rgba(255, 255, 255, 0.3)'
                    }}
                />
                <MainMenu />
            </Sider>
            {/* 右边内容 */}
            <Layout>
                {/* 右边头部 */}
                <Header style={{ paddingLeft: '16px', background: '#ccc' }}>
                    {/* 修改 Breadcrumb 使用 `items`  */}
                    <Breadcrumb
                        style={{ margin: "16px 0" }}
                        items={[
                            { title: "User" },
                            { title: "Bill" },
                        ]}
                    />
                </Header>
                {/* 右边内容 */}
                <Content style={{ margin: "16px 16px 0", backgroundColor: '#ccc' }} className="site-layout-background">
                    <Outlet />
                </Content>
                {/* 右边底部 */}
                <Footer style={{ textAlign: "center", padding: 0, lineHeight:  '48px'}}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default View;
